<template>
<div class="theme-group">
  <el-select size="small" class="font-family-select" v-model="current_theme" placeholder="请选择" @change="change">
    <el-option
      v-for="item in themeKeyList"
      :key="item.key"
      :label="item.text"
      :value="item.key"
      >
      <span :style="getThemeThumbStyle(item.key)">{{ item.text }}</span>
    </el-option>
  </el-select>
</div>

</template>

<script>
export default {
  name: "theme",
  data() {
    return {
      theme_index: 1,
      current_theme: "fresh-red-compat",
      ulActive: false,
      themeKeyList: [
        {key:'classic',text: '脑图经典'},
        {key:'classic-compact',text: '紧凑经典'},
        {key:'snow',text: '温柔冷光'},
        {key:'snow-compact',text: '紧凑冷光'},
        {key:'fish',text: '鱼骨图'},
        {key:'wire',text: '线框'},
        {key:'fresh-red',text: '清新红'},
        {key:'fresh-soil',text: '泥土黄'},
        {key:'fresh-green',text: '文艺绿'},
        {key:'fresh-blue',text: '天空蓝'},
        {key:'fresh-purple',text: '浪漫紫'},
        {key:'fresh-pink',text: '脑残粉'},
        {key:'fresh-red-compat',text: '紧凑红'},
        {key:'fresh-soil-compat',text: '紧凑黄'},
        {key:'fresh-green-compat',text: '紧凑绿'},
        {key:'fresh-blue-compat',text: '紧凑蓝'},
        {key:'fresh-purple-compat',text: '紧凑紫'},
        {key:'fresh-pink-compat',text: '紧凑粉'},
        {key:'tianpan',text:'经典天盘'},
        {key:'tianpan-compact',text: '紧凑天盘'}
      ],
    };
  },

  computed: {
    class_theme_index: function () {
      return "theme-" + this.theme_index;
    },
  },


  methods: {
    change(command) {
      minder.execCommand('theme', command)
    },
    getThemeThumbStyle(theme) {
      var themeList = kityminder.Minder.getThemeList();
      var themeObj = themeList[theme];
                if (!themeObj) {
                    return;
                }
      var style = {
        'color': themeObj['root-color'],
        'border-radius': themeObj['root-radius'] / 2
      };

      if (themeObj['root-background']) {
        style['background'] = themeObj['root-background'].toString();
      }

      return style;
		}
  },
};
</script>
